export class TimeRangeSelector {
  constructor(container, onTimeRangeChange) {
    this.container = container;
    this.onTimeRangeChange = onTimeRangeChange;
    this.customRange = false;
    this.init();
  }

  init() {
    // 创建组件 HTML
    this.container.innerHTML = `
      <div class="time-range-selector">
        <div class="preset-ranges">
          <button class="range-button active" data-range="1w">最近一周</button>
          <button class="range-button" data-range="1d">最近24小时</button>
          <button class="range-button" data-range="3d">最近3天</button>
          <button class="range-button" data-range="1m">最近一月</button>
          <button class="range-button" data-range="custom">自定义</button>
        </div>
        <div class="custom-range" style="display: none;">
          <input type="datetime-local" class="start-date" placeholder="开始时间">
          <span>至</span>
          <input type="datetime-local" class="end-date" placeholder="结束时间">
          <button class="submit-custom">确定</button>
        </div>
      </div>
    `;

    // 添加样式
    const style = document.createElement('style');
    style.textContent = `
      .time-range-selector {
        padding: 15px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }

      .preset-ranges {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
      }

      .range-button {
        padding: 8px 16px;
        border: 1px solid #e0e0e0;
        border-radius: 20px;
        background: #fff;
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .range-button:hover {
        background: #f5f5f5;
      }

      .range-button.active {
        background: #1890ff;
        color: #fff;
        border-color: #1890ff;
      }

      .custom-range {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
      }

      .custom-range input[type="datetime-local"] {
        padding: 8px;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        font-size: 14px;
      }

      .custom-range span {
        color: #666;
      }

      .custom-range button {
        padding: 8px 16px;
        background: #1890ff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.3s ease;
      }

      .custom-range button:hover {
        background: #40a9ff;
      }
    `;
    document.head.appendChild(style);

    // 绑定事件
    this.bindEvents();
  }

  bindEvents() {
    const presetButtons = this.container.querySelectorAll('.range-button');
    const customRange = this.container.querySelector('.custom-range');
    const startDate = this.container.querySelector('.start-date');
    const endDate = this.container.querySelector('.end-date');
    const submitButton = this.container.querySelector('.submit-custom');

    presetButtons.forEach(button => {
      button.addEventListener('click', () => {
        const range = button.dataset.range;
        
        // 更新按钮状态
        presetButtons.forEach(btn => btn.classList.remove('active'));
        button.classList.add('active');

        if (range === 'custom') {
          customRange.style.display = 'flex';
          return;
        }

        customRange.style.display = 'none';
        this.handleRangeSelect(range);
      });
    });

    submitButton.addEventListener('click', () => {
      if (startDate.value && endDate.value) {
        this.onTimeRangeChange({
          start: new Date(startDate.value).toISOString(),
          end: new Date(endDate.value).toISOString()
        });
      }
    });
  }

  handleRangeSelect(range) {
    const end = new Date();
    let start = new Date();

    switch (range) {
      case '1d':
        start.setDate(start.getDate() - 1);
        break;
      case '3d':
        start.setDate(start.getDate() - 3);
        break;
      case '1w':
        start.setDate(start.getDate() - 7);
        break;
      case '1m':
        start.setMonth(start.getMonth() - 1);
        break;
      default:
        break;
    }

    this.onTimeRangeChange({
      start: start.toISOString(),
      end: end.toISOString()
    });
  }
} 